<template>
  <footer class="footer">
    <div class="footer-content">
      <div class="footer-links">
        <a-row :gutter="[16, 16]">
          <a-col :span="6">
            <h3>关于我们</h3>
            <ul>
              <li><a href="#">平台介绍</a></li>
              <li><a href="#">联系我们</a></li>
              <li><a href="#">加入我们</a></li>
            </ul>
          </a-col>

          <a-col :span="6">
            <h3>帮助中心</h3>
            <ul>
              <li><a href="#">常见问题</a></li>
              <li><a href="#">用户协议</a></li>
              <li><a href="#">隐私政策</a></li>
            </ul>
          </a-col>

          <a-col :span="6">
            <h3>内容合作</h3>
            <ul>
              <li><a href="#">内容创作</a></li>
              <li><a href="#">商务合作</a></li>
            </ul>
          </a-col>

          <a-col :span="6">
            <h3>关注我们</h3>
            <div class="social-links">
              <a-space>
                <WechatOutlined />
                <WeiboOutlined />
                <TwitterOutlined />
              </a-space>
            </div>
          </a-col>
        </a-row>
      </div>

      <div class="copyright">
        <p>© 2024 CC-VIDEO All Rights Reserved.</p>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
import { WechatOutlined, WeiboOutlined, TwitterOutlined } from '@ant-design/icons-vue'
</script>

<style scoped>
.footer {
  background: #f5f5f5;
  padding: 48px 0 24px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-links {
  margin-bottom: 40px;
}

.footer-links h3 {
  font-size: 16px;
  margin-bottom: 16px;
}

.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  color: rgba(0, 0, 0, 0.65);
  text-decoration: none;
}

.footer-links a:hover {
  color: #1890ff;
}

.social-links {
  font-size: 24px;
}

.copyright {
  text-align: center;
  color: rgba(0, 0, 0, 0.45);
  border-top: 1px solid #e8e8e8;
  padding-top: 24px;
}
</style>
